<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>乐檬</title>
    <meta name="description" content="乐檬">
    <meta name="keywords" content="乐檬">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/theme-chalk.css">
    <link rel="stylesheet" href="css/login_style.css">
    <style type="text/css">
        .el-main {
            position: absolute;
            top: 83px;
            bottom: 0px;
            left: 220px;
            right: 10px;
            padding: 0;
        }
    </style>
</head>

<body class="hold-transition skin-purple sidebar-mini">
<div id="app">
    <el-container>
        <el-header class="main-header" style="height:60px;">
            <!-- 导航 -->
            <nav class="navbar navbar-static-top" :class=''>
                <!-- Logo -->
                <a href="all-admin-index.html" class="logo" style="text-align:center">
                    <span class="logo-lg" v-show='!isCollapse'><img src="img/logo.png"
                                                                    style="height: 50px;margin-top: -5px;"></span>
                </a>
                <div class="right-menu">
                    <el-dropdown class="avatar-container right-menu-item" trigger="click">
                        <div class="avatar-wrapper">
                            <img src="img/user2-160x160.jpg" class="user-avatar">
                            {{loginName}}
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided>
                                <span style="display:block;">修改密码</span>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <span style="display:block;" @click="logout">退出</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <!-- 导航 -->
                <div class="topbar-title">
                    <el-row>
                        <el-col :span="24">
                            <el-menu class="el-menu-demo headNav" mode="horizontal"
                                     :default-active="defaultActiveIndex">
                                <el-menu-item :index="item.path" v-for="item in menuList" @click="handleSelect(item)"><i
                                        class="iconNav" :class="item.icon"></i>{{item.title}}
                                </el-menu-item>
                            </el-menu>
                        </el-col>
                    </el-row>
                </div>
                <!-- end -->
            </nav>
            <!-- end -->
        </el-header>
        <el-container>
            <!-- 左侧菜单 -->
            <el-aside :width="tabWidth+'px'" id="asieHeight">
                <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" @open="handleOpen"
                         @close="handleClose" :collapse="isCollapse" :default-openeds="openeds">
                    <sidebar-item :key="data.path" v-for="data in data.children" :item="data"/>
                </el-menu>
            </el-aside>
            <!-- end -->
            <!-- iframe导入对应的模块内容 -->
            <el-container>
                <iframe name="right" id="iframepage" :src="linkUrl" style="width:100%;magrin:0 auto" marginwidth="0"
                        marginheight="0" height="100%" frameborder="0" ranat="server"></iframe>
                <!-- <iframe  name="mainFrame" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no" src="commodity-add.html" style="width:100%;magrin:0 auto"></iframe> -->
            </el-container>
            <!--  -->
        </el-container>
    </el-container>
    <!-- 底部 -->
    <el-footer>
        <footer class="main-footer">
            <div class="pull-right hidden-xs">

            </div>
        </footer>
    </el-footer>
    <!-- end -->
</div>
</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/elementui.js"></script>

<script src="js/menu.js"></script><!-- 导航菜单 -->
<script>
    // 左侧菜单组件
    Vue.component('sidebar-item', {
        props: {
            item: {
                type: Object,
                required: true
            }
        },
        template: `
        <div v-if="item.children">
            <template v-if="item.children.length == 0">
                <el-menu-item :index="item.path">
                <i class="icon" :class="item.icon"></i>
                <a :href="item.linkUrl" target="right">{{item.title}}</a>
                </el-menu-item>
            </template>
            <template v-else :index="item.path">
                <div slot="title" class="el-submenu__title">
                    <i class="icon" :class="item.icon"></i>
                    {{item.title}}
                </div>

                <template v-for="child in item.children">
                    <sidebar-item
                    v-if="child.children&&child.children.length>0"
                    :item="child"
                    :key="child.path"/>
                    <el-menu-item v-else :key="child.path" :index="child.path" style='padding-left:58px'>
                    <a :href="child.linkUrl" target="right">{{child.title}}</a>
                    </el-menu-item>
                </template>
            </template>          
        </div>`
    })
    new Vue({
        el: '#app',
        // router,
        data() {
            return {
                loginName:'',
                visible: false,
                isCollapse: false,
                tabWidth: 180,
                test1: 1,
                intelval: null,
                winfo: 'winfo',
                data: [],
                menuList:  [
                {
                    "path":  "1",//菜单项所对应的路由路径
                    "title":  "首页",  //菜单项名称
                    "icon":"iconHome",//是否有子菜单，若没有，则为[]
                },
                {
                    "path":  "2",
                    "title":  "商品",//一级菜单
                    "icon":"iconCommodity",
                    "children":  [
                        {
                            "path":  "2‐1",
                            "title":  "商品管理",//二级菜单
                            "linkUrl":"",
                            "icon":"iconSp",
                            "children":[
                                {
                                    "path":  "2‐1‐1",
                                    "title":  "商品列表",
                                    "linkUrl":"/goods/spu.html",//三级菜单
                                },
                                {
                                    "path":  "2‐1‐2",
                                    "title":  "添加商品",
                                    "linkUrl":"commodity‐add.html",
                                }
                            ]
                        },
                        {
                            "path":  "2‐2",
                            "title":  "添加配置",
                            "linkUrl":"",
                            "icon":"iconSet",
                            "children":[
                                {
                                    "path":  "2‐2‐1",
                                    "title":  "商品分类",
                                    "linkUrl":"all‐medical‐list.html",
                                },
                                {
                                    "path":  "2‐2‐2",
                                    "title":  "规格参数",
                                    "linkUrl":"all‐medical‐list.html",
                                }
                            ]
                        }
                    ]
                }
            ],
                defaultActiveIndex: "2",
                defaultActive: '2-1-2',
                openeds: [],
                linkUrl: 'all-item-list.html'
            }
        },
        created() {
            let linkUrl = localStorage.getItem('linkUrl')
            let activeIndex = localStorage.getItem('activeIndex')
            if (linkUrl !== 'undefined') {
                this.linkUrl = linkUrl
                this.defaultActiveIndex = activeIndex
            }

            axios.get("/login/name.do").then(res=>{
                this.loginName = res.data;
            })

            axios.get("/menu/findMenu.do").then(res => {

                // 获取导航数据
                this.menuList = res.data
                // 导航默认选择
                this.data = res.data[1]
                let data = []
                for (let i = 0; i < this.data.children.length; i++) {
                    data.push(this.data.children[i].path)
                }
                this.openeds = data

            })
        },
        methods: {
            logout(){
                axios.post("/logout.do").then(res=>{
                    location.href="/login.html"
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 选择顶部导航菜单，联动左侧菜单
            handleSelect(key) {
                localStorage.setItem('linkUrl', key.linkUrl)
                localStorage.setItem('activeIndex', key.path)
                var data = []
                for (var i = 0; i < key.children.length; i++) {
                    data.push(key.children[i].path)
                    this.defaultActive = key.children[0].children[0].path
                    this.linkUrl = key.children[0].linkUrl

                }
                this.openeds = data
                this.data = key
            }
        }
    })

    window.onload = windowHeight; //页面载入完毕执行函数
    function windowHeight() {
        var wd = 220;
        var iframepage = document.getElementById("iframepage")
        var asieHeight = document.getElementById("asieHeight")
        iframepage.style.width = document.documentElement.clientWidth - wd + 'px'
        asieHeight.style.height = document.documentElement.clientHeight + 'px'
    }
</script>
</html>
